<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="style.css">

<body>
    <div class="box">
        <div class="top_box">
            <div class="top_nav">
                <!-- 顶部定位 -->
                <div class="areamimi">
                    <ul class="areamimi_1">
                        <li class="location"><img src="./images/location.png" alt=""></li>
                        <li><a href="#" class='dt change nav_a'>四川</a></li>
                    </ul>
                    <ul class="location_fllow">
                        <li>北京</li>
                        <li>上海</li>
                        <li>重庆</li>
                        <li>深圳</li>
                        <li>广东</li>
                        <li>广西</li>
                        <li>河南</li>
                        <li>江苏</li>
                        <li>南京</li>
                        <li>武汉</li>
                    </ul>
                </div>

                <ul class="login">
                    <li class="rt_login">
                        <a href="https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F"
                            class="change nav_a">你好，请登录</a>
                    </li>
                    <li class="enroll"> <a href="https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/">免费注册</a>
                    </li>
                </ul>
                <ul class="battle">
                    <li class="vertical"></li>
                    <!-- 我的订单 -->
                    <li class="orders">
                        <!-- <div>
                            <a href="#" class="">我的订单</a>
                        </div> -->
                        <a href="#" class="change">我的订单</a>
                    </li>
                    <li class="vertical"></li>
                </ul>
                <div>
                    <ul class="my_jd">
                        <li><a href="" class="change jd">我的京东</a></li>
                        <li class="dorp"><img src="./images/dorp-down.png" alt="" class="dorp_down"></li>
                        <li class="jd_select">
                            <div>
                                <div class="jd_select_itme1">
                                    <div class="itme1 change">待处理订单</div>
                                    <div class="itme2 change">我的问答</div>
                                </div>
                                <div class="jd_select_itme1">
                                    <div class="itme1 change">返修退换货</div>
                                    <div class="itme2 change">我的关注</div>
                                </div>
                                <div class="jd_select_itme1">
                                    <div class="itme1 change">降价商品</div>
                                </div>
                                <div class="line"></div>
                                <div class="jd_select_itme1">
                                    <div class="itme1 change">我的京豆</div>
                                    <div class="itme2 change itme3">我的优惠券</div>
                                </div>
                                <div class="jd_select_itme1">
                                    <div class="itme1 change">我的白条</div>
                                    <div class="itme2 change">我的理财</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <ul class="battle">
                    <li class="vertical"></li>
                    <!-- 京东会员 -->
                    <li class="orders">

                        <a href="#" class="change">京东会员</a>
                    </li>
                    <li class="vertical"></li>
                </ul>
                <div>
                    <ul class="my_jd">
                        <li><a href="" class="change jd">企业采购</a></li>
                        <li class="dorp"><img src="./images/dorp-down.png" alt="" class="dorp_down"></li>
                        <li class="procurement ">
                            <div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">企业采购</div>
                                    <div class="p_itme2 change">公共频道</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">工业品</div>
                                    <div class="p_itme3 change">商用场景管</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">礼品卡</div>
                                    <div class="p_itme3 change">微信企业购</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">工业优选</div>
                                    <div class="p_itme3 change">京东锦礼</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">大中型客户采购</div>

                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <li class="vertical"></li>
                <div>
                    <ul class="my_jd">
                        <li><a href="" class="change jd">客户服务</a></li>
                        <li class="dorp"><img src="./images/dorp-down.png" alt="" class="dorp_down"></li>
                        <li class="procurement ">
                            <div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">企业采购</div>
                                    <div class="p_itme2 change">公共频道</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">工业品</div>
                                    <div class="p_itme3 change">商用场景管</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">礼品卡</div>
                                    <div class="p_itme3 change">微信企业购</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">工业优选</div>
                                    <div class="p_itme3 change">京东锦礼</div>
                                </div>
                                <div class="procurement_itme">
                                    <div class="p_itme1 change">大中型客户采购</div>

                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <ul class="battle">
                    <li class="vertical"></li>
                    <!-- 京东会员 -->
                    <li class="orders">

                        <a href="#" class="change">京东会员</a>
                    </li>

                </ul>
                <ul class="battle">
                    <li class="vertical"></li>
                    <!-- 京东会员 -->
                    <li class="orders">

                        <a href="#" class="change">京东会员</a>
                    </li>

                </ul>
                <ul class="battle">
                    <li class="vertical"></li>
                    <!-- 京东会员 -->
                    <li class="orders">

                        <a href="#" class="change">京东会员</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="header">
            <div class="header_box">
                <div class="logo">
                    <a href="https://www.jd.com/" class="header_logo"></a>
                </div>
                <div class="header_box_right">
                    <div class="form">
                        <input type="text" class="text">
                        <div class="photo_search">
                            <a href="" class="photo_search_logo"><img src="./images/photo.png" alt=""></a>
                        </div>
                        <a href="" class="search_bt"> <img src="./images/search.png" alt=""></a>
                    </div>
                    <div class="hotword">
                        <a href="" class="font-red">游戏超品日</a>
                        <a href="">CPU套装</a>
                        <a href="">绿色建材</a>
                        <a href="">厨房小电</a>
                        <a href="">仲夏厨房</a>
                        <a href="">手机好电</a>
                        <a href="">正品鉴别</a>
                    </div>
                    <div class="navitmes">
                        <a href="" class="font-red">秒杀</a>
                        <a href="" class="font-red">优惠券</a>
                        <a href="">PLUS会员</a>
                        <a href="">品牌闪购</a>
                        <a href="">拍卖</a>
                        <a href="">京东家电</a>
                        <a href="">京东超市</a>
                        <a href="">京东生鲜</a>
                        <a href="">京东国际</a>
                        <a href="">京东云</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="middle">
            <div class="middle_box">
                <div class="middle_box_left">
                    <ul class="box_left">
                        <li class="box_left_1"><a href="">家用电器</a>
                            <div class="nav_itme1">
                                <div class="nav_itme1_left">
                                    <div class="itme1_left1">
                                        <div class="left1">
                                            <a href="">家电馆</a>
                                            <span>&gt;</span>
                                        </div>
                                    </div>
                                    <div class="itme1_left2">
                                        <div class="left1">
                                            <a href="" class="test">开店设备一站购</a>
                                            <span>&gt;</span>
                                        </div>
                                    </div>
                                    <ul class="nav_left">
                                        <li><a href="">电视 &gt;</a></li>
                                        <li><a href="">空调 &gt;</a></li>
                                        <li><a href="">洗衣机 &gt;</a></li>
                                        <li><a href="">冰箱 &gt;</a></li>
                                        <li><a href="">厨卫大电 &gt;</a></li>
                                        <li><a href="">厨房小电 &gt;</a></li>
                                        <li><a href="">生活电器 &gt;</a></li>
                                        <li><a href="">个护健康 &gt;</a></li>
                                        <li><a href="">视听影音 &gt;</a></li>
                                    </ul>
                                    <ul class="nav_right">
                                        <li><a href="">电视</a></li>
                                        <li><a href="">空调</a></li>
                                        <li><a href="">洗衣机 </a></li>
                                        <li><a href="">冰箱</a></li>
                                        <li><a href="">厨卫大电</a></li>
                                        <li><a href="">厨房小电</a></li>
                                        <li><a href="">生活电器</a></li>
                                        <li><a href="">个护健康</a></li>
                                        <li><a href="">视听影音</a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="">手机</a>
                            <span>/</span>
                            <a href="">运营商</a>
                            <span>/</span>
                            <a href="">数码</a>
                        </li>
                        <li>
                            <a href="">电脑</a>
                            <span>/</span>
                            <a href="">办公</a>
                        </li>
                        <li>
                            <a href="">家居</a>
                            <span>/</span>
                            <a href="">家具</a>
                            <span>/</span>
                            <a href="">家装</a>
                            <span>/</span>
                            <a href="">厨具</a>
                        </li>
                        <li>
                            <a href="">男装</a>
                            <span>/</span>
                            <a href="">女装</a>
                            <span>/</span>
                            <a href="">童装</a>
                            <span>/</span>
                            <a href="">内衣</a>
                        </li>
                        <li>
                            <a href="">美妆</a>
                            <span>/</span>
                            <a href="">个护清洁</a>
                            <span>/</span>
                            <a href="">宠物</a>
                        </li>
                        <li>
                            <a href="">女鞋</a>
                            <span>/</span>
                            <a href="">箱包</a>
                            <span>/</span>
                            <a href="">钟表</a>
                            <span>/</span>
                            <a href="">珠宝</a>
                        </li>
                        <li>
                            <a href="">男鞋</a>
                            <span>/</span>
                            <a href="">运动</a>
                            <span>/</span>
                            <a href="">户外</a>
                        </li>
                        <li>
                            <a href="">房产</a>
                            <span>/</span>
                            <a href="">汽车</a>
                            <span>/</span>
                            <a href="">汽车用品</a>
                        </li>
                        <li>
                            <a href="">母婴</a>
                            <span>/</span>
                            <a href="">玩具乐器</a>
                        </li>
                        <li>
                            <a href="">食品</a>
                            <span>/</span>
                            <a href="">酒类</a>
                            <span>/</span>
                            <a href="">生鲜</a>
                            <span>/</span>
                            <a href="">特产</a>
                        </li>
                        <li>
                            <a href="">艺术</a>
                            <span>/</span>
                            <a href="">礼品鲜花</a>
                            <span>/</span>
                            <a href="">农资绿植</a>
                        </li>
                        <li>
                            <a href="">医药保健</a>
                            <span>/</span>
                            <a href="">计生情趣</a>
                        </li>
                        <li>
                            <a href="">图书</a>
                            <span>/</span>
                            <a href="">文娱</a>
                            <span>/</span>
                            <a href="">教育</a>
                            <span>/</span>
                            <a href="">电子书</a>
                        </li>
                        <li>
                            <a href="">机票</a>
                            <span>/</span>
                            <a href="">酒店</a>
                            <span>/</span>
                            <a href="">旅游</a>
                            <span>/</span>
                            <a href="">生活</a>
                        </li>
                        <li>
                            <a href="">理财</a>
                            <span>/</span>
                            <a href="">众筹</a>
                            <span>/</span>
                            <a href="">白条</a>
                            <span>/</span>
                            <a href="">保险</a>
                        </li>
                        <li><a href="">安装</a>
                            <span>/</span>
                            <a href="">维修</a>
                            <span>/</span>
                            <a href="">清洗</a>
                            <span>/</span>
                            <a href="">二手</a>
                        </li>
                        <li>
                            <a href="">工业品</a>
                        </li>
                    </ul>
                </div>
                <div class="middle_box_center">
                    <div class="banner">
                        <!-- <img class="img1" src="./images/banner1.webp" alt="">
                        <img class="img2" src="./images/banner2.jpg" alt="">
                        <img class="img3" src="./images/banner3.jpg" alt="">
                        <img class="img4" src="./images/banner4.jpg" alt="">
                        <img class="img5" src="./images/banner5.jpg" alt="">
                        <img class="img6" src="./images/banner6.jpg" alt="">
                        <img class="img7" src="./images/banner7.jpg" alt="">
                        <img class="img8" src="./images/banner8.jpg" alt=""> -->
                        <div class="banner_bt left_bt">
                            <span id="btm">&lt;</span>
                        </div>
                        <div class="banner_bt right_bt">
                            <span id="btm">&gt;</span>
                        </div>
                        <ul class="promo_nav">
                            <li class="promo_nav--li itme_li--1"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                            <li class="promo_nav--li"></li>
                        </ul>
                    </div>
                </div>
                <ul class="banner_card">
                    <li class="card_itme1">
                        <img src="./images/banner_card1.jpg.webp " alt="" class="card_img">
                    </li>
                    <li class="card_itme1">
                        <img src="./images/banner_card2.jpg.webp " alt="" class="card_img">
                    </li>
                    <li class="card_itme1">
                        <img src="./images/banner_card3.jpg.webp " alt="" class="card_img">
                    </li>
                </ul>
                <div class="middle_box_right">
                    <div class="right_card_itme1">
                        <div class="card_itme1--logo">
                            <div class="card_logo">
                                <img src="./images/logo.png" alt="" class="card_logo--img">
                            </div>
                            <div class="user_show">
                                <a href="">Hi~欢迎逛京东！</a>
                                <p>
                                    <a href="">登录</a>
                                    <span class="login_crad">&nbsp;|&nbsp;</span>
                                    <a href="">注册</a>
                                </p>
                            </div>
                        </div>
                        <div class="newmoney">
                            <!-- <li class="newmoney_first"> -->
                            <a href="" class="newmoney_first_1 newmony_itme">新人福利</a>
                            <!-- </li> -->
                            <!-- <li class="newmoney_first "></li> -->
                            <a href="" class="newmoney_first_2 newmony_itme">PLUS会员</a>
                        </div>
                    </div>
                    <div class="right_card_itme2">
                        <div class="news">
                            <h5 class="jd_new">京东快报</h5>
                            <a href="" class="new_more">更多 &gt;</a>
                        </div>
                        <ul class="new_li">
                            <li class="new_li_itme">
                                <a href="" class="li_itme1">
                                    <span class="li_itme1--fr">最新</span>
                                    从18岁以后就要开始抗老！林清轩小仙瓶水乳套装安排起来</a>
                            </li>
                            <li class="new_li_itme">
                                <a href="" class="li_itme1">
                                    <span class="li_itme1--fr">热评</span>
                                    澳佳宝保健配方胶囊，男士健康的守护者
                                </a>
                            </li>
                            <li class="new_li_itme">
                                <a href="" class="li_itme1">
                                    <span class="li_itme1--fr">HOT</span>
                                    德国NK夹式小风扇，模拟自然风，让你清凉一夏
                                </a>
                            </li>
                            <li class="new_li_itme">
                                <a href="" class="li_itme1">
                                    <span class="li_itme1--fr">热议</span>
                                    电竞游戏轻松驾驭，这款游戏本厉害了！
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="right_card_itme3">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>